<template>
  <a-tabs :default-active-key="activeIndex" @change="handleTabSelect">
    <a-tab-pane key="1" tab="生产任务">
      <task-table
        :columns="this.$staticMenu.productColumns"
        :url="tableUrl"
        selectType="checkbox"
        :type="tableType"
        :params="tableParams"
        :size="pageSize"
        :sizeOptions="pageSizeOptions"
        rowKeyName="id"
        ref="productTable"
        @onSelect="tableOnSelect"
      >
        <!-- 补充搜索条件 -->
        <a-row slot="searchCri">
          <a-col :span="3">
            <a-input class="searchCriteria" placeholder="任务名称" v-model="tableParams.name" />
          </a-col>
          <a-col :span="6">
            <a-button type="primary" @click="criteriaSearchProduct">
              <a-icon type="search" />查询
            </a-button>
            <a-button @click="clearCriteriaProduct">
              <a-icon type="sync" />重置
            </a-button>
          </a-col>
          <a-col :span="15" style="text-align:right" v-if="this.isManager">
            <a-button type="primary" @click="acceptProduct" >
              <a-icon type="check" />审批通过
            </a-button>
            <a-button type="danger" @click="rejectProduct" >
              <a-icon type="close" />拒绝
            </a-button>
          </a-col>
        </a-row>
        <!-- end -->
              <!-- 补充表格每行的操作 -->
         <span slot="tableRowAct" slot-scope="props">
          <a>
            <span class="ant-tag" @click="editFlow(props.record)">
              <a-icon type="edit"/> 编辑
            </span>
          </a>
        </span>
      </task-table>
      <modal
        ref="flowModalForm"
        :flowTitle="modalFlowTitle"
        :flowVisible="modalFlowVisible"
        :id="recordId"
        @cancel="handleCancel"
        @ok="handleOk"
      >
      </modal>
    </a-tab-pane>
    <a-tab-pane key="2" tab="评估任务" force-render>
      <unit-table
        :columns="this.$staticMenu.estimateColumns"
        :url="tableEstimateUrl"
        selectType="checkbox"
        :type="tableEstimateType"
        :params="tableParamsEstimate"
        :size="pageSize"
        :sizeOptions="pageSizeOptions"
        rowKeyName="id"
        ref="estimateTable"
        @onSelect="tableOnSelect"
      >
        <!-- 补充搜索条件 -->
        <a-row slot="searchCri">
          <a-col :span="3">
            <a-select v-model="tableParamsEstimate.classify" class="searchCriteria">
              <a-select-option v-for="(item, key) of classify" :key="item" :value="item">{{ item }}</a-select-option>
            </a-select>
          </a-col>

          <a-col :span="3">
            <a-input class="searchCriteria" placeholder="任务名称" v-model="tableParamsEstimate.name" />
          </a-col>
          <a-col :span="6">
            <a-button type="primary" @click="criteriaSearchEstimate">
              <a-icon type="search" />查询
            </a-button>
            <a-button @click="clearCriteriaEstimate">
              <a-icon type="sync" />重置
            </a-button>
          </a-col>
          <a-col :span="12" style="text-align:right" v-if="this.isManager">
            <a-button type="primary" @click="acceptEstimate" >
              <a-icon type="check" />审批通过
            </a-button>
            <a-button type="danger" @click="rejectEstimate" >
              <a-icon type="close" />拒绝
            </a-button>
          </a-col>
        </a-row>
        <!-- end -->
      </unit-table>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import {
  GETPRODUCTLIST,
  PRODUCTACCEPT,
  PRODUCTREJECT,
  GETESTIMATELIST,
  GETALLCLASSIFY,
  ESTIMATEACCEPT,
  ESTIMATEREJECT
} from '@/../static/js/apis.js';
import unitTable from '@/common/table';
import taskTable from '@/common/table1';
import modal from "./editFlowModal"
import global from '@/../static/global.vue'
export default {
  inject: ['reload'], // 注入App里的reload方法
  name: 'allUnit',
  components: {
    unitTable,
    taskTable,
    modal
  },
  data () {
    return {
      tableSelectedKeys: [],
      tableUrl: GETPRODUCTLIST.url, // 调用表格组件，必须参数，后台数据接口
      tableType: GETPRODUCTLIST.type, // 调用表格组件，必须参数，后台方法方法（get，post）
      tableEstimateUrl: GETESTIMATELIST.url, // 调用表格组件，必须参数，后台数据接口
      tableEstimateType: GETESTIMATELIST.type, // 调用表格组件，必须参数，后台方法方法（get，post）
      pageSize: 15,
      pageSizeOptions: ['15', '20', '40'],
      /* 调用表格组件，可选参数，其他相关搜索条件 */
      tableParams: {
        name: '',
        astatus: '未审批'
      },
      tableParamsEstimate: {
        classify: '全部分类',
        name: '',
        astatus: '未审批'
      },
      classify: [],
      activeIndex: '1',
      userRole: localStorage.getItem('role'),
      modalFlowTitle:'',
      modalFlowVisible:false,
      recordId:''
    }
  },
  computed: {
    // 判断是否管理员
    isManager () {
      return global.isManager(global.SYS_BUSINSESS_MANAGE)
    }
  },
  methods: {
    /* 表格checkbox选中事件 */
    tableOnSelect (selectedRowKeys, selectedRows) {
      this.tableSelectedKeys = selectedRowKeys
    },
    /* 查询按钮 */
    criteriaSearchProduct () {
      this.$refs.productTable.fetch(1)
    },
    /* 查询按钮 */
    criteriaSearchEstimate () {
      this.$refs.estimateTable.fetch(1)
    },
    /* 重置按钮 */
    clearCriteriaProduct () {
      this.tableParams.name = '';
      this.$refs.productTable.rowSelection.onChange([ ],[ ])
      this.criteriaSearchProduct()
    },
    /* 重置按钮 */
    clearCriteriaEstimate () {
      this.tableParamsEstimate.classify = '全部分类';
      this.tableParamsEstimate.name = '';
      this.$refs.estimateTable.rowSelection.onChange([ ],[ ])
      this.criteriaSearchEstimate()
    },
    getStaticData () {
      let self = this
      GETALLCLASSIFY('', function (res) {
        self.classify = res
      })
    },
    handleTabSelect (key) {
      localStorage.setItem('activeIndex', key)
    },
    acceptProduct () {
      let self = this
      const selectedRowKeys = self.tableSelectedKeys
      var params = {
        ids: selectedRowKeys,
        userid: parseInt(localStorage.getItem('userid'))
      }
      if (selectedRowKeys.length > 0) {
        PRODUCTACCEPT(params, function (res) {
          self.$message.success(res.message)
          self.reload()
        })
      } else {
        self.$message.warning('请在表格中勾选要审批的数据！')
      }
    },
    rejectProduct () {
      let self = this
      const selectedRowKeys = self.tableSelectedKeys
      var params = {
        ids: selectedRowKeys,
        userid: parseInt(localStorage.getItem('userid'))
      }
      if (selectedRowKeys.length > 0) {
        PRODUCTREJECT(params, function (res) {
          self.$message.success(res.message)
          self.reload()
        })
      } else {
        self.$message.warning('请在表格中勾选要审批的数据！')
      }
    },
    acceptEstimate () {
      let self = this
      const selectedRowKeys = self.tableSelectedKeys
      var params = {
        ids: selectedRowKeys,
        userid: parseInt(localStorage.getItem('userid'))
      }
      if (selectedRowKeys.length > 0) {
        ESTIMATEACCEPT(params, function (res) {
          self.$message.success(res.message)
          self.reload()
        })
      } else {
        self.$message.warning('请在表格中勾选要审批的数据！')
      }
    },
    rejectEstimate () {
      let self = this
      const selectedRowKeys = self.tableSelectedKeys
      var params = {
        ids: selectedRowKeys,
        userid: parseInt(localStorage.getItem('userid'))
      }
      if (selectedRowKeys.length > 0) {
        ESTIMATEREJECT(params, function (res) {
          self.$message.success(res.message)
          self.reload()
        })
      } else {
        self.$message.warning('请在表格中勾选要审批的数据！')
      }
    },
    handleOk (e) {
      this.modalFlowVisible = false
    },
    handleCancel(e) {
      this.modalFlowVisible = false
    },
    editFlow(record){
      this.recordId=record.id
      this.modalFlowTitle=record.name
      this.modalFlowVisible = true
      this.$nextTick(() => {
          this.$refs.flowModalForm.getStaticData()
       })
    }
  },
  created () {
    this.getStaticData()
    let activeIndex = localStorage.getItem('activeIndex')
    this.activeIndex = activeIndex
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.searchCriteria {
  width: 90%;
}
.actionBtn button:not(:last-child),
.ant-row button:not(:last-child) {
  margin-right: 20px;
}
/deep/ .ant-tabs-nav-wrap {
  text-align: center;
}
/deep/.ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane{
  overflow-x:scroll;
}
</style>
